<template>
 <div id="#box">
  <div class="nav">
   <div style="display: inline-block; ">
	    <el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>已结束活动</el-breadcrumb-item>
		</el-breadcrumb>
   </div>
  </div>
  <div class="fbox">
  	<el-container>
	  <el-aside width="43vw">
	  	<p class="title">辩论赛</p>
		<el-collapse v-model="activeNames" @change="handleChange">
		  <el-collapse-item name="1">
		  	<template slot="title"><i class="el-icon-user pad-5"></i> 参与人数</template>
		    <div>10人</div>
		  </el-collapse-item>
		  <el-collapse-item  name="2">
		  	<template slot="title"><i class="el-icon-document pad-5"></i> 具体描述</template>
		    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
		  </el-collapse-item>
		  <el-collapse-item name="3">
		  	<template slot="title"><i class="el-icon-s-promotion pad-5"></i> 积分详情</template>
		    <div>简化流程：设计简洁直观的操作流程；</div>
		  </el-collapse-item>
		</el-collapse>
		<p class="content">
  			<span><i class="el-icon-s-flag pad-5"></i>活动结果：</span>
	  	</p>
	  	<div class="radertu">
			<chart ref="chart1" :options="detailOptions" :auto-resize="true" style='width: 40vw;height: 45vh;'></chart>
		</div>
	  </el-aside>
	  <el-main width="20vw">
	  	<p style="font-size: 20px;">参与者</p>
	  	<div class="ubox">
	  		<p class="user" v-for="(item,index) in list">
	  			用户名：<span style="padding-right: 20px;">{{item.name}}</span>
	  			总票数：<span >{{item.num}}</span>
	  		</p>
	  		
	  	</div>  
	  	<el-divider></el-divider>
		  	<el-upload action="#" list-type="picture-card"  :auto-upload="false">
			    <i slot="default" class="el-icon-plus"></i>
			    <div slot="file" slot-scope="{file}">
			      <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""  >
			      <span class="el-upload-list__item-actions">
			        <spanclass="el-upload-list__item-preview" @click="handlePictureCardPreview(file)" >
			          <i class="el-icon-zoom-in"></i>
			        </span>
			        <span  v-if="!disabled"  class="el-upload-list__item-delete"  @click="handleDownload(file)"  >
			          <i class="el-icon-download"></i>
			        </span>
			        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"  >
			          <i class="el-icon-delete"></i>
			        </span>
			      </span>
			    </div>
			</el-upload>
		<el-dialog :visible.sync="dialogVisible">
		  <img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	  </el-main>
  	</el-container>
  </div>
  
 </div>
</template>

<script>
 import echarts from 'echarts'
 export default{
  data(){
   return{
    	detailOptions: {},
    	activeNames:'',
    	radio: '3',
    	list:[
    	{
    		num:'123',
    		name:'aaa'
    	},
    	{
    		num:'321',
    		name:'bbb'
    	},
    	{
    		num:'123',
    		name:'aaa'
    	}
    	],
    	dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        currentRow: null,
        dialogTableVisible: false
      }
  },
  mounted(){
  	this.detailOptions = {
  		color: ['#3398DB'],
	    tooltip : {
	        trigger: 'axis',
	        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
	            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
	        }
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis : [
	        {
	            type : 'category',
	            data : ['第一组', '第二组', '第三组', '第四组', '第五组', '第六组', '第七组'],
	            axisTick: {
	                alignWithLabel: true
	            }
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'票数是',
	            type:'bar',
	            barWidth: '60%',
	            data:[10, 52, 200, 334, 390, 330, 220]
	        }
	    ]
	  }
	  },
	  methods:{
	  	 handleChange(val) {
	        console.log(val);
	     },
	      handleRemove(file) {
      		  console.log(file);
	      },
	      handlePictureCardPreview(file) {
	        this.dialogImageUrl = file.url;
	        this.dialogVisible = true;
	      },
	      handleDownload(file) {
	        console.log(file);
	      },
	      setCurrent(row) {
	        this.$refs.singleTable.setCurrentRow(row);
	      },
	      handleCurrentChange(val) {
	        this.currentRow = val;
	      }
	  }
 }
</script>

<style scoped="scoped">
 .nav{
  padding: 10px 20px;
  width: 70vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
 }
 .el-aside {
    color: #333;
    text-align: center;
    height: 80vh;
     border: solid 2px #E9EEF3;
  }
  
  .el-main {
    border: solid 2px #E9EEF3;
    color: #333;
    text-align: center;
    height: 80vh;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  .fbox{
  	width: 70vw;
  	margin-left: 20px;
  }
  .title{
  	padding: 10px;
  	font-size: 20px;
  }
  .content{
  	text-align: left;
  	padding-top: 10px;
  }
  .radertu{
		width: 200px;
		height: 120px;
	}
	.pad-5{
		padding: 0 5px;
	}
	.user{
		text-align: left;
		padding-top: 10px;
	}
	.ubox{
		height: 40vh;
		/*overflow: scroll;*/
	}
</style>